<template>
  <div class="test-container">
    <h2>Bottom.vue组件 --- {{ count }}</h2>
    <h3>mapState形式获取state状态 --- {{ vuexCount }}</h3>
    <h3>使用sync修饰符 countProp = {{ countProp }}</h3>
    <button @click="addVuexCount">vuexCount+1 (原始方式)</button>
    <!-- vue只方法默认第一个参数 是事件数据对象 -->
    <!-- getInt()方法 就是传递的载荷 -->
    <button @click="addCount(getInt(), $event)">vuexCount+100 (辅助函数)</button>
    <button @click="addAsyncCount">异步调用(原始形式)</button>
    <button @click="getAsyncCount(getInt(), $event)">异步调用(辅助函数)</button>
    <div>
      <button @click="addCountSync">+1</button>
      <button @click="subCountSync">-1</button>
    </div>
    <hr>
    <!-- 声明一个插槽区域 -->
    <!-- vue 官方规定: 每一个 slot 插槽, 都要有一个 name 名称 -->
    <!-- 如果省略 slot 的 name 属性, 则有一个默认名称叫做 default -->
    <slot name="default">
      <!-- 后备内容(默认内容), 如果组件的使用者没有为插槽提供任何内容, 则后备内容生效 -->
      <h6>这是 default 插槽的默认内容</h6>
    </slot>
  </div>
</template>

<script>

// 1.导入 eventBus.js 模块
import eventBus from '@/components/eventBus'
import { mapState, mapMutations, mapActions } from 'vuex'
import { getRandomInt } from '@/util/tool'

export default {
  props: ['countProp'],
  name: 'Bottom',
  data () {
    return {
      count: 111,
    }
  },
  computed: {
    ...mapState(['vuexCount'])
  },
  methods: {
    addCountSync () {
      this.$emit('update:countProp', this.countProp + 1)
    },
    subCountSync () {
      this.$emit('update:countProp', this.countProp - 1)
    },
    // 原始方式
    addVuexCount () {
      const randomInt = getRandomInt(1, 10)

      // 调用mutation方法, 提交mutation
      // commit(mutation名称)
      // 给mutation传值
      // commit的第二个参数就是要传递的载荷 payload 就是传入的参数
      this.$store.commit('addCount', randomInt)
    },
    // 此时组件方法中就会拥有一个对应的addCount方法
    // 将`this.addCount()` 映射为 `this.$store.commit('addCount')`
    ...mapMutations(['addCount']),
    ...mapActions(['getAsyncCount']),

    getInt () {
      return getRandomInt(100, 200)
    },
    addAsyncCount () {
      // 原始形式
      // commit是提交mutations
      // dispatch 调用action
      this.$store.dispatch('getAsyncCount', 50)
    }
  }
}
</script>


<!-- scoped解决了单页面中的样式冲突问题 -->
<!-- 底层原理: 使用了属性选择器
      style使用了scoped, 会给当前的所有组件标签加一个相同自定义属性 data-v-xxx
      然后选择器寻找元素的时候, 会自动加上自定义属性  h3[data-v-xxx]
-->
<style lang="less" scoped>
.test-container {
  background-color: darkseagreen;
  height: 250px;
}

// 实现需求: 只想在这个Left组件中改变子组件my-count的样式, 而不改变其他地方my-count的样式
// /deep/ 使用场景
// 当使用第三方组件的时候, 如果有修改组件默认样式的需求, 需要用到 /deep/
//                       使用style行内样式, 也可以修改第三方组件默认样式
/deep/ h5 {
  color: red;
}

/*
/deep/ h5 { xxx } --> 实际效果  [data-v-3c83f0b7] h5 { xxx }
[data-v-3c83f0b7] h5 { xxx } 是一个后代选择器, 选择属性[data-v-3c83f0b7]
*/
</style>
